<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" type="text/css" href="/static/plugs/layui-v2.5.6/css/layui.css" />
<!--    <link rel="stylesheet" type="text/css" href="/static/plugs/layui-v2.5.6/css/modules/code.css" />-->
<!--    <link rel="stylesheet" type="text/css" href="/static/plugs/layui-v2.5.6/css/modules/laydate/default/laydate.css?v=5.0.9" />-->
<!--    <link rel="stylesheet" type="text/css" href="/static/plugs/font-awesome-4.7.0/css/font-awesome.min.css" />-->
<!--    <link rel="stylesheet" type="text/css" href="/static/admin/css/public.css?v=1676709443" />-->
    <script src="/static/plugs/layui-v2.5.6/layui.js"></script>
    <title>我的评价</title>
    <style>
        .top{position: absolute;top: 0;left: 0;height: .88rem;line-height: .88rem;width: 100%;text-align: center;font-size: .36rem;color: #333333;background: #FFFFFF;}

        *{margin:0px;padding:0px;}
        .tabbox{margin:10px;}
        .tabbox ul{list-style:none;display:table;}
        .tabbox ul li{float:left;width:90px;line-height:30px;padding-left:8px;border:1px solid #aaccff;margin-right:-1px;cursor:pointer;}
        .tabbox ul li.active{background-color:#e73839;color:white;font-weight:bold;}
        .tabbox .content{padding:10px;}
        /*border:1px solid #aaccff;*/
        .tabbox .content>div{display:none;}
        .tabbox .content>div.active{display:block;}

        img{
            display: flex;
            padding-left: 10px;
            padding-top: 25px;
            width:60px;
            height:60px;
            backgroundColor:"#ccc";
            border-radius: 50%;
        }
        #upload-inner{
                display: flex;
                justify-content: flex-start;
                align-content: center;
        }
        .span-nic{
            padding-top: 65px;
            padding-left: 20px;

        }
    </style>
</head>
<body>
<div class="top"  style="font-width: 600;font-size:20px;margin: 14px 0 12px 0;font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;vertical-align: middle;color:#444743">
    我的评价
</div>
    <div>
        <div id="upload-inner">

        </div>


        <div class="tabbox">
            　　<ul>
            　　　　<li  name="record" class="active">往期评价</li>
<!--            　　　　<li  name="publish" class="active">发表追评</li>-->

            　　</ul>
            <div class="content">
                　　<div class="active">
                        <div class="item">
                            <span >ID</span>
                            <span >模板名称</span>
                            <span >班级</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span style="float: right;padding-right:50px">操作</span>
                            <hr>
                        </div>
                　　　　<div class="record-items" id="record-items">

                      </div>
                　　</div>
                    <div >
                        <div >
                            <form>

                                    <div>
                                    <input type="hidden" value="" name="users_id">
                                    <input type="hidden" value="" name="template_id"  >
                                    <input type="hidden" value="" name="qr_user_id"  >
                                    </div>

                                    <!--评价内容    -->
                                    <div>
                                        <textarea name="content" placeholder="说点什么吧..." style="height: 124px; width: 318px;"></textarea>
                                    </div>

                                    <div class="submit" style="text-align: center">
                                        <button type="reset" class="layui-btn layui-btn-primary" data-table-reset="currentTableRenderId"> 重 置 </button>
<!--                                        <button id="submit"  class="layui-btn layui-btn-normal" data-type="tableSearch" data-table="currentTableRenderId" lay-submit="" lay-filter="currentTableRenderId_filter"> 提 交</button>-->
                                        <button id="submit" lay-submit lay-filter="sub" class="layui-btn layui-btn-normal">提交</button>
                                    </div>


                            </form>
                        </div>
                    </div>
                　　</div>
        </div>

    </div>
</body>
</html>
<script src="/h5/js/bootstrap.js"></script>
<script type="text/javascript" src="/h5/js/jquery.min.js"></script>
<script type="text/javascript" src="/h5/js/stars.js"></script>
<script type="text/javascript" src="/h5/js/layer.js"></script>
<script>
    var qr_id = GetQueryString('qr_id');
    var template_id = GetQueryString('template_id');
    var users_id = GetQueryString('users_id');
    var qr_user_id = GetQueryString('qr_user_id');
    $("[name='template_id']").val(template_id);
    $("[name='users_id']").val(users_id);
    $("[name='qr_user_id']").val(qr_user_id);
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    $(function() {
        getUserInfo();//获取用户信息
        getRecordList();//获取历史评价
        function getUserInfo()
        {
            //使用ajax发送请求
            $.ajax({
                url:"/api/evaluation.users/getUsersInfo?users_id="+users_id,
                type:"get",
                dataType:"json",
                success:function(res){
                    // console.log(res.data.head_pic);return false;
                    createTouxiang(res);

                }
            });
        }
        //头像信息
        function createTouxiang(res)
        {
            let InnerEle = document.getElementById('upload-inner')
            let ImgEle = document.createElement('img')
            let SpanEle = document.createElement('span')
            SpanEle.setAttribute('class', 'span-nic')
            SpanEle.innerHTML = res.data.nickname;
            ImgEle.setAttribute('src', res.data.head_pic)
            // append追加
            InnerEle.appendChild(ImgEle)
            InnerEle.appendChild(SpanEle)
        }



    });
    function quzhuiping()
    {
        // let html = '<div class="nav_upload">\n' +
        //     '    <input type="text" value="我是html"/>\n' +
        //     '</div>\n' +
        //     '<script>\n' +
        //     '这里写交互功能'+
        //     '<\/\script>';
        // let html1  = '<div className="layuimini-container">\n' +
        //     '<form id="app-form" className="layui-form layuimini-form">\n'+
        //     '<div className="layui-form-item">'+
        //     '<label className="layui-form-label">评价日期及截止日期</label>' +
        //     '<div className="layui-input-block">' +
        //     '<input type="text" name="evaluate_period_time" className="layui-input user2-createTime" lay-verify="required" autoComplete="off">' +
        //     ' </div>' +
        //     '</div>' +
        //     '<div className="hr-line"></div>' +
        //     '<div className="layui-form-item text-center">' +
        //     '<button type="submit" className="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>' +
        //     '<button type="reset" className="layui-btn layui-btn-primary layui-btn-sm">重置</button>' +
        //     '  </div>' +
        //     ' </form>' +
        //     ' </div>';

        layer.open({
            type: 2 //2类型，解析url iframe层
            ,closeBtn: 0 //关闭按钮是否显示 1显示0不显示
            ,title: "去追评"//页面标题
            ,shadeClose: true //点击遮罩区域是否关闭页面
            ,shade: 0.8 //遮罩透明度 类型：String/Array/Boolean 弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
            ,area: ['300px', '300px'] //弹出层页面比例
            ,content: ['/api/evaluation.zhuiping/zhuiping.html?users_id='+users_id + '&qr_id=' + qr_id +'&qr_user_id=' + qr_user_id, 'no']//弹出层的url,//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['XXX.html', 'no']
            ,success: function (layero, index) {
                layero[0].childNodes[1].childNodes[0].removeAttribute('href');
                layero[0].childNodes[1].classList.add('cursorStyle');
                layero[0].childNodes[1].childNodes[0].classList.remove('layui-layer-close2');
                layero[0].childNodes[1].childNodes[0].classList.add('layui-layer-close1');
            },
        });

    }
    //历史记录
    function getRecordList()
    {
        //使用ajax发送请求
        $.ajax({
            // url: "/api/evaluation.elist/recordList?users_id=" + users_id,
            url: "/api/evaluation.template/TemplateList?users_id=" + users_id,
            type: "get",
            dataType: "json",
            success: function (res) {
                // console.log(res);return false;

                $.each(res.data, function (index, value) {
                    console.log(index, value)

                    var htm = "";
                    htm += "<div class='item'>";
                    htm += "<span style='word-wrap:break-word;word-break:break-all;width:50%'>" + value.id + "</span>";
                    htm += "<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>";
                    htm += "<span style='word-wrap:break-word;word-break:break-all;width:50%'>" + value.template_name + "</span>";
                    htm += "<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>";
                    htm += "<span style='word-wrap:break-word;word-break:break-all;width:50%'>" + value.class_name + "</span>";
                    htm += "<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>";


                    if(value.type == 1){
                        htm += "<span style='float:right;padding-right:50px'><a href="+value.link_address+">去评价</a></span>";
                    }
                    if(value.type == 2){
                        htm += "<span style='float:right;padding-right:50px'><a href="+"./zhuiping.html?template_id="+value.template_id+"&qr_id="+value.id+"&users_id="+users_id +"&qr_user_id="+qr_user_id+">去追评</a></span>";
                    }

                    htm += "</div>";
                    htm += "<hr/>";
                    htm += "<br/>";
                    htm += "<br/>";
                    $('.record-items').append(htm);
                })
            }
        });
    }

    $(function ()
    {
        $(".tabbox li").click(function ()
        {
            var name = $(this).attr('name');
            if(name == 'record') {

                // $("#record-items").load(location.href + " #record-items");
                $('.record-items').empty();
                getRecordList()
            }
            //获取点击的元素给其添加样式，讲其兄弟元素的样式移除
            $(this).addClass("active").siblings().removeClass("active");
            //获取选中元素的下标
            var index = $(this).index();
            $(this).parent().siblings().children().eq(index).addClass("active")
                .siblings().removeClass("active");
        });
    });
    //表单追加评价
    layui.use([ 'element', 'jquery', 'laydate', 'form'],function() {
        var $ = layui.jquery;
        var element = layui.element;
        var laydate = layui.laydate;
        var form = layui.form;
        //监听提交事件
        form.on('submit(sub)', function(data){
            // console.log(data);return false;
            var fields=$(data.form).serializeArray();// serialize
            var ret = true;
            var msg = '';
            $.each(fields, function(index, value) {
                // alert(index + ': ' + value.name);

                if(value.name == "content" && value.value == ''){
                    ret = false;
                    msg = '请进行文字评价';
                    return false;
                }
            });
            if(ret == false){
                layer.msg(msg);return false;
            }
            //使用ajax发送请求
            $.ajax({
                url:"/api/evaluation.elist/addReview",
                type:"post",
                data:fields,
                dataType:"json",
                success:function(data){
                    $("[name='content']").val('');
                    layer.msg(data.msg);
                    //window.location = './myinfo.html'
                }
            });
            return false;  //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    }

    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }
</script>